<template>
  <div class="index clearafter">
    <module-head></module-head>
    <div class="content flex">
      <div class="w220">
        <menu-list></menu-list>
      </div>
      <div class="w980 flex_full">
        <p class="flex flex_vcenter pdb20">
          <i class="titleTag"></i>
          <span class="fRedBig">随访记录</span>
        </p>
        <div class="whiteBg">
          <ul class="flex wrap illInfoBox">
            <li>
              <label>姓 名：</label>
              <span>{{mainInfo.patient.BRXM}}</span>
            </li>
            <li>
              <label>性 别：</label>
              <span>{{mainInfo.patient.BRXB | sex}}</span>
            </li>
            <li>
              <label>年 龄：</label>
              <span>{{mainInfo.patient.CSNY | old}}</span>
            </li>
            <li>
              <label>联系电话：</label>
              <span>{{mainInfo.patient.LXDH}}</span>
            </li>
            <li>
              <label>证件类型：</label>
              <span></span>
            </li>
            <li>
              <label>证件号码：</label>
              <span></span>
            </li>
            <li>
              <label>随访时间：</label>
              <span>{{mainInfo.SFSJ | timeStr}}</span>
            </li>
            <li>
              <label>随访名称：</label>
              <span>{{mainInfo.SFMC}}</span>
            </li>
            <li>
              <label>随访人：</label>
              <span></span>
            </li>
            <li>
              <form class="form-inline">
                <div class="form-group">
                  <label>随访方式：</label>
                  <select class="form-control">
                    <option value="1">电话随访</option>
                    <option value="2">当面随访</option>
                    <option value="3">视频随访</option>
                  </select>
                </div>
              </form>
            </li>
          </ul>
          <div class="mt20"></div>
          <div class="qWindow">
            <qa :qadata="QAdata" :default-qadata="defaultQadata"></qa>
          </div>
          <div style="margin:0 auto">
            <div>
              <label class="checkbox-inline">
                <input type="radio" value="1" v-model="status"> 随访成功
              </label>
              <label class="checkbox-inline">
                <input type="radio" value="2" v-model="status"> 随访失败
              </label>
            </div>
            <div class="flex pd20" v-show="status == 2">
              <label>随访失败原因：</label>
              <div class="pl10">
                <select class="form-control" v-model="reason">
                  <option :value="'未拨通电话'">未拨通电话</option>
                  <option :value="'患者电话为空号'">患者电话为空号</option>
                  <option :value="'患者拒绝随访'">患者拒绝随访</option>
                </select>
              </div>
            </div>
            <div class="flex pd20" v-show="status == 2">
              <label>随访其它记录：</label>
              <div class="pl10">
                <textarea cols="30" rows="3" class="form-control col-sm-10" v-model="otherRecord"></textarea>
              </div>
            </div>
            <div class="flex flex_center">
              <button class="longBtn" @click="fail()">完成随访</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Public from 'assets/public.js'
  import 'assets/lib/laydate/laydate.js'
  import 'assets/lib/laydate/need/laydate.css'
  import 'assets/lib/laydate/skins/danlan/laydate.css'
  import moduleHead from 'components/module-head'
  import menuList from 'components/menu-list'
  import qa from 'components/qa/QA.vue'
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
  export default {
    data () {
      return {
        mainInfo: {
          patient: {}
        },
        tableData: [],
        defaultQadata: {},
        QAdata: [1,2,3,4,5,6,7],
        otherRecord: '',
        reason: '',
        status: ''
      }
    },
    components: {
      moduleHead, menuList, qa
    },
    filters: {
      'sffs' (val) {
        if (val == 1) {
          return '电话随访'
        } else if (val == 2) {
          return '当面随访'
        } else if (val == 3) {
          return '视频随访'
        }
      },
      'SFZL' (val) {
        if (val == 1) {
          return '慢病随访'
        } else if (val == 2) {
          return '出院普通随访'
        }else if (val == 3) {
          return '门诊普通随访'
        }
      },
      'sex' (val) {
        if (val == 1) {
          return '男'
        } else if (val == 2) {
          return '女'
        } else {
          return '不详'
        }
      },
      'old' (val) {
        if (val) {
          var year = val.slice(0,4)
          return new Date().getFullYear()-year
        }
      },
      'jhzt' (val) {
        if (val == 0) {
          return '否'
        } else {
          return '是'
        }
      },
      'timeStr' (val) {
        var time = new Date(val)
        var result = this.formatDate(time)
        return result
      }
    },
    ready () {
      var self = this
      var mainInfo = window.location.href.split('?')[1]
      this.mainInfo = JSON.parse(decodeURIComponent(mainInfo.split('=')[1]))
      sessionStorage.setItem('patientInfo', JSON.stringify(this.mainInfo))
      console.log(JSON.stringify(this.mainInfo))
      this.getStyle()
    },
    methods: {
      formatDate (now) {
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        if (month<10) {
          month = '0'+month
        }
        var date=now.getDate()
        if (date<10) {
          date = '0'+date
        }
        return year+"-"+month+"-"+date;
      },
      getStyle () {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/style",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            JGID: 1,
            YSXH: this.mainInfo.YSXH,
            BBH: this.mainInfo.BBH,
            ZYH: this.mainInfo.ZYH,
            BRLX: this.mainInfo.BRLX
          },
          success:function(res) {
            if (res.ReType === 0 && res.Data) {
              self.defaultQadata = res.Data[0]
              var data = res.Data[0].projects
              data.forEach((v, i) => {
                v.show = (i === 0)
              })
              self.QAdata = self.refactData(data)
              console.log(self.QAdata)
            } else {
              Public.ajaxPrompt(res.Msg)
            }
          }
        })
     },
      refactData (arr) {
        let temp = []
        if (arr.length === 0) {
          return temp
        }
        arr.forEach(v => {
          if (v.XJKJLX === 1 || v.XJKJLX === 2) {
            // for text & textarea
            temp.push(this.refactInput(v))
          } else if (v.XJKJLX === 3) {
            // for normal radio
            temp.push(this.refactRadio(v))
          } else if (v.XJKJLX === 5) {
            // for select radio
            temp.push(this.refactSelect(v))
          } else if (v.XJKJLX === 4) {
            // for checkbox
            temp.push(this.refactCheckbox(v))
          } else if (v.XJKJLX === 9) {
            // for item title
            if (v.XMLB > 2) {
              temp.push(this.refactInput(v))
            } else {
              temp.push({
                type: 'title',
                title: v.XMMC,
                show: v.show,
                children: this.refactData(v.children)
              })
            }
          }
        })
        return temp
      },
      refactInput (v) {
        let obj = {
          options: [],
          type: 'input',
          title: v.XMMC,
          show: v.show
        }
        // fix some fuck input elements have no children
        // return current model
        if (v.children.length === 0) {
          obj.options.push(v)
          return obj
        }
        // todo: input
        v.children.forEach(v1 => {
          let tempObj = {
            label: v1.XMMC,
            KJLX: v.XJKJLX,
            value: '',
            model: '',
            type: 'input',
            XMLB: v1.XMLB,  // 1,2 only show texts
            QZWB: v1.QZWB, // before input's texts
            HZWB: v1.HZWB, // after input's texts
            SJGS: v1.SJGS, // format texts
            XMXH: v1.XMXH
          }
          if (v1.XJKJLX !== 9) {
            tempObj.children = this.refactData([v1])
          }
          obj.options.push(tempObj)
        })
        return obj
      },
      refactRadio (v) {
        // todo: radio
        let obj = {
          options: [],
          KJLX: v.XJKJLX,
          XMXH: v.XMXH,
          SJXM: v.SJXM,
          type: 'radio',
          title: v.XMMC,
          model: '',
          show: v.show
        }
        v.children.forEach(v1 => {
          let tempObj = {
            label: v1.XMMC,
            value: String(v1.PLSX)
          }
          if (v1.XJKJLX === 4) {
            // fix checkbox
            tempObj.children = this.refactData([v1])
          } else if (v1.XJKJLX !== 9) {
            tempObj.children = this.refactData(v1.children)
          }
          obj.options.push(tempObj)
        })
        return obj
      },
      refactSelect (v) {
        // todo: select
        let options = []
        var xmkz = v.children[0].XMKZ
        xmkz = xmkz.slice(1)
        let arr = xmkz.split(';')
        // fixed bug: remove last array element
        // Array.pop
        if (!arr[arr.length - 1]) {
          arr.pop()
        }
        arr.forEach(v1 => {
          options.push({
            label: v1.split(',')[0],
            value: String(v1.split(',')[1])
          })
        })
        let obj = {
          KJLX: v.XJKJLX,
          XMXH: v.XMXH,
          SJXM: v.SJXM,
          type: 'radio',
          title: v.XMMC,
          model: '',
          show: v.show,
          options: options
        }
        return obj
      },
      refactCheckbox (v) {
        // todo: checkbox
        let obj = {
          options: [],
          KJLX: v.XJKJLX,
          XMXH: v.XMXH,
          SJXM: v.SJXM,
          type: 'checkbox',
          title: v.XMMC,
          show: v.show,
          model: []
        }
        // todo: input
        v.children.forEach(v1 => {
          let tempObj = {
            label: v1.XMMC,
            value: String(v1.PLSX)
          }
          if (v1.XJKJLX !== 9) {
            tempObj.children = this.refactData(v1.children)
          }
          obj.options.push(tempObj)
        })
        return obj
      },
      fail () {
        var self = this
        if (this.status == 1) {
          Public.ajaxPrompt("随访完成")
          setTimeout(function(){
            window.history.go(-1)
          },2000)
        } else {
          $.ajax({
            type:"POST",
            url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/stop/plan",
            data:{
              BRLX: self.mainInfo.BRLX,
              ZYH: self.mainInfo.ZYH,
              SFZL: self.mainInfo.SFZL,
              ZZYY: self.otherRecord + self.reason,
              token: sessionStorage.getItem('sfToken')
            },
            success:function(res){
              if (res.Msg == '随访计划终止成功!') {
                Public.ajaxPrompt("随访结束")
                setTimeout(function(){
                  window.history.go(-1)
                },2000)
              }else {
                Public.ajaxPrompt(res.Msg)
              }
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/reset.css';
  @import '../../assets/flex.css';
  @import '../../assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  .illInfoBox>li{
    margin-right:20px;
  }
  .illInfoBox{
    border-bottom:2px solid #FBECEB;
    background-color: #FFFBF8;
    box-shadow: 0 3px 3px #FFFBF8;
    padding:20px;
    border-radius: 10px 10px 0 0;
  }
  .whiteBg{
    padding:0!important;
    border:2px solid #FBECEB;
  }
  .topStyle,.secondStyle,.thirdStyle{
    padding-left:20px;
  }
  .topStyle{
    padding:20px;
    border:1px solid #ddd;
    border-radius: 10px;
    margin:0 20px 0 20px;
  }
  .qWindow{
    width:500px;
    margin:0 auto;
    border:1px solid #ddd;
    padding: 0 10px;
  }
</style>
